<script lang="ts">
	import { enhance } from "$app/forms";
	import type { PageProps } from "./$types";
	import { canBeFinished } from "$lib/common/assignments";

	let { data }: PageProps = $props();

	const assignmentDate = $derived(new Intl.DateTimeFormat().format(data.assignment.date));
</script>

<svelte:head>
	<title>Opgave på {data.cemetaryPlot.address}</title>
</svelte:head>

<h1>Assignment #{data.assignment.id}</h1>
<p>
	Gravstedet, der skal vedligeholdes er ved
	<span class="address">{data.cemetaryPlot.address}</span>.
</p>
<p>Vedligeholdelsen skal finde sted <time>{assignmentDate}<time>.</time></time></p>
<p>State: {data.assignment.state}</p>

{#if canBeFinished(data.assignment)}
	<h2>Færdiggør opgave</h2>
	<p>Når du har færdiggjort opgaven, kan du uploade billederne her:</p>
	<form method="POST" action="?/finish" enctype="multipart/form-data" use:enhance>
		<label>
			Billeder:
			<input type="file" name="images" accept=".jpg, .jpeg, .png, .webp" required multiple />
		</label>
		<label>
			Ekstra bemærkninger:
			<textarea
				name="notes"
				placeholder="F.eks.: Vi løb tør for roser (?). De kommer i overmorgen :)"
			></textarea>
		</label>
		<button>Færddigør job</button>
	</form>
{:else}
	<p>Du har færddigjort denne opgave!</p>
{/if}

<style>
	.address,
	time {
		font-weight: bold;
	}

	label {
		display: block;
	}
</style>
